{include file="public/head"/}
<link rel="stylesheet" href="__PUBLIC__phone/css/sureorder.css"/>
<body>
<!--头部-->
<header id="headers">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <a href="javascript:;" class="leftRuted glyphicon glyphicon-menu-left pull-left" ></a>
                <p>确认订单</p>
            </div>
        </div>
    </div>
</header>
<!-- 确认订单 -->
<div class="sureorder normalBox container">
    <div class="cartWrap">
        <form action="#"  >
            {if condition="$address eq true"}
            <div class="row fontrow">
                <div class=" col-xs-2">
                    <label for="address">收货地址</label>
                </div>
                <div class="col-xs-10">
                    <select id="address" class="form-control">
                        {volist name="address" id="ad"}
                        <option value="{$ad.id}" data-province="{$ad.province}">{$ad.name} {$ad.phone} {$ad.province_text}{$ad.city_text}{$ad.area_text}{$ad.address}</option>
                        {/volist}
                    </select>
                    <span class="caret"></span>
                </div>
            </div>
            {/if}
            <div class="form-group">
                <button type="button" class="btn addbtn"> <span class="glyphicon glyphicon-plus"></span>新增收货地址</button>
            </div>
            <div class="form-group">
                <table class="table table-bordered">
                    <tr >
                        <td class="textlefts" colspan="4">清单</td>
                    </tr>
                    <tr class="firsttr">
                        <td class="textlefts">商品详情</td>
                        <td>订购周期</td>
                        <td>套餐价(元)</td>
                        <td>小计(元)</td>
                    </tr>
                    {volist name="cart" id="ct"}
                    <tr>
                        <td>
                            <div class="row">
                                <div class="col-xs-5">{$ct.operator_type} </div>
                                <div class="col-xs-7">{$ct.card_type}{$ct.total}/{$ct.pkg_kind} </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-5">{$ct.material}  </div>
                                <div class="col-xs-7">单张卡费:<span>￥{$ct.material_price}</span> </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-7">数量:<span>x{$ct.number}</span> </div>
                            </div>
                        </td>
                        <td>{$ct.cycle}{$ct.pkg_kind}</td>
                        <td>￥{$ct.pkg_price}</td>
                        <td>￥{$ct.small_plan}</td>
                    </tr>
                    {/volist}
                </table>
            </div>
            <div class="row fontrow">
                <div class=" col-xs-2">
                    <label  for="delivery">配送方式</label>
                </div>
                <div class="col-xs-6">
                    <select id="delivery" class="form-control">
                        {empty name="express"}
                        <option value="">该收货地址暂不支持快递服务</option>
                        {else/}
                        <option value=""> 请选择配送方式 </option>
                        {/empty}
                        {volist name="express" id="ex"}
                        <option value="{$ex.id}" data-price="{$ex.price}">{$ex.express_name}</option>
                        {/volist}
                    </select>
                    <span class="caret"></span>
                </div>
            </div>
            <div class="row fontrow">
                <div class=" col-xs-2">
                    <label for="comment">订单备注</label>
                </div>
                <div class="col-xs-10">
                    <input type="text" id="comment" name="content" maxlength="30" class="form-control" placeholder="请填好您的备注信息，字数限定在30以内"/>
                </div>
            </div>
            <div class="panel panel-default">
                <ul class="list-group">
                    <li class="list-group-item">
                        <div class="row">
                            <div class=" col-xs-4">总卡数(张):<span>{$total_number}</span> </div>
                            <div class=" col-xs-4"> 合计(元):<span>￥{$total_price}</span></div>
                            <div class=" col-xs-4"> 运费(元):<span id="freight">￥0</span></div>
                        </div>
                    </li>
                    <li class="list-group-item oranges">
                        根据运营商规则，物联网卡一经售出不予退换
                    </li>
                </ul>
            </div>
        </form>
    </div>
</div>
<div class="bottombg">
</div>
<div class="navbar navbar-fixed-bottom bottomBox">
    <div class="container">
        <div class="row">
            <div class="col-xs-4 pads">全场满600元包邮</div>
            <div class="col-xs-4 pads">合计：￥<span id="total">{$total_price}</span></div>
            <div class="col-xs-4">
                <a href="javascript:;" class="btn balance">提交订单</a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        var freight = $('#freight');
        var total_price = "<?php echo $total_price; ?>";
        var total = $('#total');
        // 切换地址选择快递
        $('#address').on('change',function(){
            var p = $(this).find('option:checked').data('province');
            $.post("{:url('/home/Shop/getExpress')}",{'p':p},function(data){
                var sExpress = $('#delivery');
                var sOption = '';
                sExpress.empty();
                freight.text('￥0');
                total.text(total_price);
                if(data.code){
                    sOption = '<option value="">该收货地址暂不支持快递服务</option>';
                    sExpress.append(sOption);
                } else {
                    sExpress.append('<option value="">请选择收货地址</option>');
                    for(var i in data.express){
                        sOption = '<option value="'+data.express[i]['id']+'" data-price="'+data.express[i]['price']+'" >'+data.express[i]['express_name']+'</option>';
                        sExpress.append(sOption);
                    }
                }
            })
        })

        // 切换快递列表
        $('#delivery').on('change',function(){
            var ePrice = $(this).find('option:checked').data('price');
            if(!$(this).val()){
                freight.text('￥0');
                total.text(total_price);
                return false;
            }
            if(total_price >= 600){
                freight.text(' 免运费');
                return false;
            }
            freight.text('￥'+ePrice);
            // 总价
            $('#total').text((parseInt(total_price*100)+parseInt(ePrice*100))/100);
        })

        // 新增地址
        $('button.addbtn').on('click',function(){
            window.location.href = '/home/Personal/address';
        })

        $('.bottomBox').on('click','.balance',function(){
            var address = $('#address').val();
            console.log(address);
            if(!address){
                reminder('请选择收货地址');
                return false;
            }
            var express = $('#delivery').val();
            if(!express){
                reminder('请选择配送方式！');
                return false;
            }
            var remarks = $('#comment').val();
            $.post("{:url('/home/Shop/submitOrder')}",{'address':address,'express':express,'remarks':remarks},function(data){
                console.log(data);
                if(data.code){
                    reminder(data.msg);
                } else {
                    window.location.href = "/home/Order/payment?order_number="+data.order_number;
                }
            })
        })
    })
</script>
</body>
</html>